<template>
  <div class="row" id="digitalFlop" style="height: 100%">
<!--    左边部分开始-->
      <div class="col-3 column">
        <div class="col">
          <Card :height="180">
            <template slot="title">志愿者人群分布趋势</template>
            <LineChart
              :chartsLineData="chartsLineData"
              :isSmooth="true"
              :labelIsShow="true"
              :legendIsShow="true"
              :isStack="true"
            />
          </Card>
        </div>
      </div>
<!--    左边部分结束-->
<!--    中间文字部分开始-->
      <div class="col-6 column">
        <div class="row margin-to">
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="总注册志愿者数：" :titleNumber="form.volunteerCount"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="社区服务站数:" :titleNumber="form.communityLevelCount"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="网格片区数:" :titleNumber="form.gridLevelCount"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="志愿队伍数:" :titleNumber="form.teamCount"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="积分兑换总次数:" :titleNumber="form.exchangeCount"/>
          </div>
        </div>
        <div class="row margin-to">
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="慈善企业数:" :titleNumber="form.enterpriseCount"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="志愿活动数:" :titleNumber="form.activityCount"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="累计工时:" :titleNumber="String(form.totalWorkHour)"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="平均工时:" :titleNumber="form.avgWorkHour"/>
          </div>
          <div class="col-md-1-5 col-lg-1-5 col-xs-1-5 col-sm-1-5">
            <Textbox style="height: 100%" titleIsShow="捐赠总价值:" :titleNumber="String(form.totalPriceSum)"/>
          </div>
        </div>
      </div>
<!--    中间文字部分结束-->
      <div class="col-3 column" >
        <div class="col">
          <Card>
            <template slot="title">热门活动服务排行</template>
            <template slot="button-1">
              <button :class="chartsBarData.project.button?'button-no-1':'button-yes-1'" @click="getchartsBar('project')">时长</button>
              <button :class="chartsBarData.people.button?'button-no-1':'button-yes-1'" @click="getchartsBar('people')">人数</button>
            </template>
            <BarChart
              :chartsBarData="chartsBarData.project.button?chartsBarData.project.chartData:chartsBarData.people.chartData"
              :labelIsShow="false"
              :legendIsShow="true"
              :isStack="true"
            />
          </Card>
        </div>
      </div>
<!--      <div class="col-8">-->
<!--        <dv-digital-flop :config="item.config" style="height: 70px" />-->
<!--      </div>-->
  </div>
</template>
<script>
import { hotActivity, volunteer, volunteerPopulation } from '@/network/request.js'
import Card from '@/components/common/card.vue'
import LineChart from '@/components/charts/lineChart'
import BarChart from '@/components/charts/barChart'
import Textbox from '@/components/common/textbox'
export default {
  name: 'DigitalFlop',
  components: {
    Card,
    LineChart,
    BarChart,
    Textbox
  },
  data () {
    return {
      form: {},
      chartsLineData: {},
      chartsBarData: {
        project: {
          button: true,
          chartData: {}
        },
        people: {
          button: false,
          chartData: {}
        }
      }
    }
  },
  methods: {
    // 柱装图按钮点击
    getchartsBar (e) {
      if (e === 'project') {
        this.chartsBarData.project.button = true
        this.chartsBarData.people.button = false
      } else {
        this.chartsBarData.project.button = false
        this.chartsBarData.people.button = true
      }
    },
    createChart () {
      this.chartsLineData = {
        legend: [
          '群众',
          '中共党员',
          '中共预备党员',
          '共青团员',
          '无党派民主人士'
        ],
        xAxis: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月'
        ],
        series: [
          [145, 23, 96, 542, 478],
          [242, 189, 32, 69, 234],
          [125, 389, 132, 416, 134],
          [356, 189, 232, 116, 134],
          [452, 389, 532, 426, 234]
        ]
      }
      volunteerPopulation().then(res => {
        this.chartsLineData.xAxis = res.data.map(item => (item.month + '月'))
        for (let i = 0; i < res.data.length; i++) {
          this.chartsLineData.series[i] = res.data.map(item => (Number(item.volunteerPopulationDTOS[i].volunteerCount)))
        }
        this.chartsLineData = { ...this.chartsLineData }
        console.log(this.chartsLineData, 'jjjjjjj')
      })
      this.chartsBarData.project.chartData = {
        legend: [
          '服务总时长'
        ],
        xAxis: [
          '关爱老人',
          '关爱儿童'
        ],
        series: [
          [
            9440,
            6280,
            3594,
            5616,
            6452
          ]
        ]
      }
      this.chartsBarData.people.chartData = {
        legend: [
          '服务总人数'
        ],
        xAxis: [
          '卫生保卫',
          '交通维护'
        ],
        series: [
          [
            124,
            256,
            134,
            123,
            212
          ]
        ]
      }
      hotActivity({ key: 'VOLUNTEER' }).then(res => {
        this.chartsBarData.people.chartData.xAxis = res.data.map(item => (item.activityName))
        this.chartsBarData.people.chartData.series[0] = res.data.map(item => (Number(item.totalVolunteer)))
        this.chartsBarData.people.chartData = { ...this.chartsBarData.people.chartData }
        this.chartsBarData.project.chartData.xAxis = res.data.map(item => (item.activityName))
        this.chartsBarData.project.chartData.series[0] = res.data.map(item => (Number(item.totalWorkHour)))
        this.chartsBarData.project.chartData = { ...this.chartsBarData.project.chartData }
        console.error('aaaaaabbbbbbb', this.chartsBarData.project.chartData)
      })
      // $$Api('/data.json')
      //   .then((result) => {
      //     const _digitalFlopData = result.dataV.digitalFlop
      //     this.digitalFlopData = new Array()
      //     _digitalFlopData.forEach((item, index) => {
      //       this.digitalFlopData.push({
      //         title: item.title,
      //         config: {
      //           number: item.number,
      //           toFixed: 2,
      //           textAlign: 'center',
      //           content: '{nt}' + item.unit
      //         }
      //       })
      //       // console.log(this.digitalFlopData);
      //     })
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },
    getform () {
      volunteer().then(res => {
        this.form = res.data
        this.form.avgWorkHour = this.form.avgWorkHour.toFixed(2)
      })
    }
  },
  created () {
    this.createChart()
    this.getform()
  },
  mounted () {
    setTimeout(this.createChart, 200)
  }
}
</script>
<style scoped>
.button-yes-1{
  margin-left: 10px;
  padding: 0.1vh 0.5vw;
  border:2px solid #66FFFF;
  color: #ffffff;
  border-radius: 8px;
  background-color: #041824;
  transition: box-shadow 0.3s ease;
}
.button-yes-1:hover{
  box-shadow: 0px 0px 10px #66FFFF;
}
.button-no-1{
  margin-left: 10px;
  box-shadow: 0px 0px 10px #66FFFF;
  padding: 0.1vh 0.3vw;
  border:2px solid #66FFFF;
  color: #ffffff;
  border-radius: 8px;
  background-color: #66FFFF;
}
.margin-to{
  margin-top: 1vh;
  height: 40%;
}

.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
  position: relative;

}

.col-xs-1-5 {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-5 {
    width: 20%;
    float: left;
  }
}
</style>
